<template>
  <div class="week">
    <div class="week-desc">周末去哪儿</div>
    <div class="week-img" v-for="item in weekList" :key="item.id">
      <img :src="item.imgUrl"/>
      <p class="t1">{{item.t1}}</p>
      <p class="t2">{{item.t2}}</p>
      <div class="week-bot"></div>
    </div>
    <div class="footer">
      <div class="footer-a">票面价是指通过景区指定窗口售卖的纸质门票上标注的价格</div>
      <div class="footer-b">
        <ul class="foo-c">
          <li><span class="iconfont icon-listfeiji"></span>机票</li>
          <li><span class="iconfont icon-julebujiudianlei"></span>酒店</li>
          <li><span class="iconfont icon-danjiangongyu"></span>公寓</li>
          <li class="more"><span class="iconfont icon-xinxing"></span>更多</li>
        </ul>
        <ul class="foo-d">
          <li><a href="">登录我们</a></li>
          <li><a href="">我的订单</a></li>
          <li><a href="">最近浏览</a></li>
          <li><a href="">关于我们</a></li>
        </ul>
        <p class="foo-e">触屏版&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电脑版</p>
        <p class="foo-f">Qunar京ICP备05021087意见反馈</p>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'HomeWeek',
    props:{
        weekList:Array
    },
    data () {
      return {
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .week{
    .week-desc{
      text-indent:.1rem;
      line-height :.4rem;
      background-color :#ffffff;
    }
    .week-img{
      img{
        width: 100%;
      }
      .t1{
        margin:.15rem 0 0 .1rem;
        font-size :.16rem;
      }
      .t2{
        line-height :.3rem;
        margin-left :.1rem;
      }
      .week-bot{
        width: 100%;
        height:.05rem;
        background-color:#f5f5f5;
      }
    }
  }
  .footer{
    .footer-a{
      line-height :.3rem;
      background-color white
      font-size :.12rem;
      text-indent :.1rem;
    }
    .footer-b{
      background-color:#f3f3f3;
      .foo-c{
        display:flex;
        justify-content :center;
        line-height :.4rem;
        li{
          width:.7rem;
          span{
            font-size :.2rem;
          }
          .more{
            border-left :.01rem solid gainsboro;
          }
        }
      }
      .foo-d{
        display :flex;
        padding-bottom .1rem;
        border-bottom:.02rem solid gray;
        li{
          width 25%;
          align-items center
         /* width:.8rem;*/
          text-align center
        }
      }
      .foo-e{
        line-height :.3rem;
        text-align center
      }
      .foo-f{
        text-align center;
        padding-bottom :.05rem;
        border-bottom :.01rem solid gainsboro;
      }
    }
  }
</style>
